<template>
  <div>
    <el-tree
      :props="defaultProps"
      :load="loadTreeNodes"
      lazy
      highlight-current
      @node-click="handleNodeClick">
    </el-tree>
  </div>
</template>

<script>
import api from "@/api"
export default {
  data(){
    return {
      data:[],
      defaultProps: {
        children: "children",
        label: "name"
      }
    }
  },
  methods: {
    handleNodeClick(data){
      this.$emit("onTreeData",data)
    },
    loadTreeNodes(node, resolve){
      // 判断是不是第一个级别
      if(node.level === 0){
        api.getSelectItemCategoryByParentId().then(res => {
          if(res.status === 200){
            return resolve(res.data.data)
          }else{
            alert("请求失败")
          }
        })
      }
      if(node.level >= 1){
         api.getSelectItemCategoryByParentId({
          id:node.data.cid
         }).then(res => {
          if(res.status === 200){
            return resolve(res.data.data)
          }else{
            alert("请求失败")
          }
        }).catch(error =>{
          return resolve([])
        })
      }
    }
  }
}
</script>

<style>

</style>